<template>
  <!--
    资源管理，说白了有2块：菜单资源 + api和按钮资源
    菜单资源维护menu的resourceName, resourceUrl等属性。用于展示菜单，和给router找页面
    api和按钮资源称为功能，添加功能url时只需要加微服务后面的路径，比如：/api/lyc-web-api/lyc-admin/index/selectMenuTree，只用加/index/selectMenuTree部分
  -->
  <section id="SystemMng-ResourceMng-Page">
    <div class="tree-ctn">
      <Tree :data="resourceList" @on-select-change="setParentIdFun"></Tree>
    </div>
    <!--菜单资源操作部分-->
    <div class="resourceMng-ctn" v-if="(isLeaf===0)">
      <SearchCpn searchTitle="数据操作">
        <Button class="btn-reset" @click="insertModalShow_menu=true"><Icon type="ios-add" class="icon-reset"/>新增</Button>
        <Button class="btn-reset" @click="updateShowFun_menu"><Icon type="ios-build" class="icon-reset"/>编辑</Button>
        <Button type="error" class="btn-reset" @click="deleteFun"><Icon type="md-trash" class="icon-reset"/>删除</Button>
      </SearchCpn>
      <TableCpn :columns="columns_menu" :data="dataShow_menu" :total="pageTool_menu.total" :current="pageTool_menu.pageNum" :page-size="pageTool_menu.pageSize" @on-select-all="selectAllFun_menu" @on-selection-change="selectionChangeFun_menu" @on-change="changePageFun_menu"></TableCpn>
      <!--新增弹框部分-->
      <Modal v-model="insertModalShow_menu" title="新增资源" @on-ok="insertFun" width="500">
        <div class="modal-item">
          <label>资源名称：</label>
          <Input class="modal-ipt-reset" v-model="insertInfo_menu.resourceName" placeholder="请输入资源名称" clearable/>
        </div>
        <div class="modal-item">
          <label>资源url：</label>
          <Input class="modal-ipt-reset" v-model="insertInfo_menu.resourceUrl" placeholder="请输入资源url" clearable/>
        </div>
        <div class="modal-item">
          <label>资源图标：</label>
          <Input class="modal-ipt-reset" v-model="insertInfo_menu.icon" placeholder="请输入资源图标" clearable/>
        </div>
        <div class="modal-item">
          <label>资源优先级：</label>
          <Input class="modal-ipt-reset" v-model="insertInfo_menu.priority" placeholder="请输入资源优先级" clearable/>
        </div>
        <div class="modal-item">
          <label>节点类型：</label>
          <Select class="modal-ipt-reset" v-model="insertInfo_menu.isLeaf" clearable>
            <Option :value="0" :key="0">枝子节点</Option>
            <Option :value="1" :key="1">叶子节点</Option>
          </Select>
        </div>
        <div class="modal-item">
          <label>资源状态：</label>
          <Select class="modal-ipt-reset" v-model="insertInfo_menu.status" clearable>
            <Option :value="0" :key="0">禁用</Option>
            <Option :value="1" :key="1">启用</Option>
          </Select>
        </div>
      </Modal>
      <!--编辑弹框部分-->
      <Modal v-model="updateModalShow_menu" title="编辑资源" @on-ok="updateFun" width="500">
        <div class="modal-item">
          <label>资源名称：</label>
          <Input class="modal-ipt-reset" v-model="updateInfo_menu.resourceName" placeholder="请输入资源名称" clearable/>
        </div>
        <div class="modal-item">
          <label>资源url：</label>
          <Input class="modal-ipt-reset" v-model="updateInfo_menu.resourceUrl" placeholder="请输入资源url" clearable/>
        </div>
        <div class="modal-item">
          <label>资源图标：</label>
          <Input class="modal-ipt-reset" v-model="updateInfo_menu.icon" placeholder="请输入资源图标" clearable/>
        </div>
        <div class="modal-item">
          <label>资源优先级：</label>
          <Input class="modal-ipt-reset" v-model="updateInfo_menu.priority" placeholder="请输入资源优先级" clearable/>
        </div>
        <div class="modal-item">
          <label>节点类型：</label>
          <Select class="modal-ipt-reset" v-model="updateInfo_menu.isLeaf" clearable>
            <Option :value="0" :key="0">枝子节点</Option>
            <Option :value="1" :key="1">叶子节点</Option>
          </Select>
        </div>
        <div class="modal-item">
          <label>资源状态：</label>
          <Select class="modal-ipt-reset" v-model="updateInfo_menu.status" clearable>
            <Option :value="0" :key="0">禁用</Option>
            <Option :value="1" :key="1">启用</Option>
          </Select>
        </div>
        <div class="modal-item">
          <label>资源状态：</label>
          <Select class="modal-ipt-reset" v-model="updateInfo_menu.isDelete" clearable>
            <Option :value="0" :key="0">已删除</Option>
            <Option :value="1" :key="1">未删除</Option>
          </Select>
        </div>
      </Modal>
    </div>
    <!--功能资源操作部分-->
    <div class="resourceMng-ctn" v-if="(isLeaf===1)">
      <SearchCpn searchTitle="数据操作">
        <Button class="btn-reset" @click="insertModalShow_function=true"><Icon type="ios-add" class="icon-reset"/>新增</Button>
        <Button class="btn-reset" @click="updateShowFun_function"><Icon type="ios-build" class="icon-reset"/>编辑</Button>
        <Button type="error" class="btn-reset" @click="deleteFun"><Icon type="md-trash" class="icon-reset"/>删除</Button>
      </SearchCpn>
      <TableCpn :columns="columns_function" :data="dataShow_function" :total="pageTool_function.total" :current="pageTool_function.pageNum" :page-size="pageTool_function.pageSize" @on-select-all="selectAllFun_function" @on-selection-change="selectionChangeFun_function" @on-change="changePageFun_function"></TableCpn>
      <!--新增弹框部分-->
      <Modal v-model="insertModalShow_function" title="新增资源" @on-ok="insertFun" width="500">
        <div class="modal-item">
          <label>资源名称：</label>
          <Input class="modal-ipt-reset" v-model="insertInfo_function.resourceName" placeholder="请输入资源名称" clearable/>
        </div>
        <div class="modal-item">
          <label>资源url：</label>
          <Input class="modal-ipt-reset" v-model="insertInfo_function.resourceUrl" placeholder="请输入资源url" clearable/>
        </div>
        <div class="modal-item">
          <label>节点类型：</label>
          <Input class="modal-ipt-reset" v-model="insertInfo_function.isLeaf" disabled/>
        </div>
        <div class="modal-item">
          <label>资源状态：</label>
          <Select class="modal-ipt-reset" v-model="insertInfo_function.status" clearable>
            <Option :value="0" :key="0">禁用</Option>
            <Option :value="1" :key="1">启用</Option>
          </Select>
        </div>
      </Modal>
      <!--编辑弹框部分-->
      <Modal v-model="updateModalShow_function" title="编辑资源" @on-ok="updateFun" width="500">
        <div class="modal-item">
          <label>资源名称：</label>
          <Input class="modal-ipt-reset" v-model="updateInfo_function.resourceName" placeholder="请输入资源名称" clearable/>
        </div>
        <div class="modal-item">
          <label>资源url：</label>
          <Input class="modal-ipt-reset" v-model="updateInfo_function.resourceUrl" placeholder="请输入资源url" clearable/>
        </div>
        <div class="modal-item">
          <label>资源状态：</label>
          <Select class="modal-ipt-reset" v-model="updateInfo_function.status" clearable>
            <Option :value="0" :key="0">禁用</Option>
            <Option :value="1" :key="1">启用</Option>
          </Select>
        </div>
        <div class="modal-item">
          <label>删除状态：</label>
          <Select class="modal-ipt-reset" v-model="updateInfo_function.isDelete" clearable>
            <Option :value="0" :key="0">已删除</Option>
            <Option :value="1" :key="1">未删除</Option>
          </Select>
        </div>
      </Modal>
    </div>
  </section>
</template>

<script>
import SearchCpn from '../../selfCpn/SearchCpn'
import TableCpn from '../../selfCpn/TableCpn'
import { selectResourceTreeFun, selectChildByResourceIdFun, resourceMng_insertFun, resourceMng_updateFun, resourceMng_deleteFun } from '../../../api/apiFun'
export default {
  data () {
    return {
      labelWidth: 100,
      resourceId: "",
      isLeaf: 0,
      insertModalShow_menu: false,
      updateModalShow_menu: false,
      insertModalShow_function: false,
      updateModalShow_function: false,
      resourceList: [],
      insertInfo_menu: {
        resourceName: '',
        resourceUrl: '',
        isLeaf: '',
        icon: '',
        priority: '',
        status: ''
      },
      insertInfo_function: {
        resourceName: '',
        resourceUrl: '',
        isLeaf: 1,
        status: ''
      },
      updateInfo_menu: {
      },
      updateInfo_function: {
      },
      columns_menu: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "资源名称",
          key: "resourceName",
          align: "center"
        },
        {
          title: "优先级",
          key: "priority",
          align: "center"
        },
        {
          title: "资源状态",
          key: "status",
          align: "center",
          render: (h, params) => {
            return h("span", {}, parseInt(params.row.status) === 1 ? "启用" : "禁用")
          }
        },
        {
          title: "资源URL",
          key: "resourceUrl",
          align: "center"
        },
        {
          title: "图标",
          key: "icon",
          align: "center"
        },
        {
          title: "更新人",
          key: "updateBy",
          align: "center"
        },
        {
          title: "更新时间",
          key: "updateDate",
          align: "center"
        },
        {
          title: "删除状态",
          key: "isDelete",
          align: "center",
          render: (h, params) => {
            return h("span", {}, parseInt(params.row.isDelete) === 1 ? "未删除" : "已删除")
          }
        }
      ],
      columns_function: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "功能名称",
          key: "resourceName",
          align: "center"
        },
        {
          title: "功能状态",
          key: "status",
          align: "center",
          render: (h, params) => {
            return h("span", {}, parseInt(params.row.status) === 1 ? "启用" : "禁用")
          }
        },
        {
          title: "功能URL",
          key: "resourceUrl",
          align: "center"
        },
        {
          title: "删除状态",
          key: "isDelete",
          align: "center",
          render: (h, params) => {
            return h("span", {}, parseInt(params.row.isDelete) === 1 ? "未删除" : "已删除")
          }
        },
        {
          title: "更新人",
          key: "updateBy",
          align: "center"
        },
        {
          title: "更新时间",
          key: "updateDate",
          align: "center"
        }
      ],
      dataShow_menu: [],
      dataShow_function: [],
      selectedArr_menu: [],
      selectedArr_function: [],
      pageTool_menu: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      pageTool_function: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  components: {
    SearchCpn,
    TableCpn
  },
  created () {
    this.doSelectResourceTreeFun()
  },
  methods: {
    // 查询所有资源tree
    doSelectResourceTreeFun() {
      this.resourceList = []
      selectResourceTreeFun().then(res => {
        if(parseInt(res.code) === 0) {
          this.resourceList.push(res.data)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 记录resourceId的fun
    setParentIdFun(val) {
      this.isLeaf = val[0].isLeaf
      this.resourceId = val[0].resourceId
      this.doSelectChildByResourceIdFun()
    },
    // 菜单和功能---查询---根据resourceId查询下一级子节点
    doSelectChildByResourceIdFun() {
      this.dataShow_menu = []
      this.dataShow_function = []
      selectChildByResourceIdFun({
        resourceId: this.resourceId
      }).then((res) => {
        if(parseInt(res.code) === 0 && res.data.list && parseInt(this.isLeaf) === 0) {
          this.dataShow_menu = res.data.list
          this.pageTool_menu.total = res.data.total
          this.pageTool_menu.pageNum = 1
        }
        if(parseInt(res.code) === 0 && res.data.list && parseInt(this.isLeaf) === 1) {
          this.dataShow_function = res.data.list
          this.pageTool_function.total = res.data.total
          this.pageTool_function.pageNum = 1
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 菜单和功能---新增fun
    insertFun() {
      let params = parseInt(this.isLeaf) === 0 ? JSON.parse(JSON.stringify(this.insertInfo_menu)) : parseInt(this.isLeaf) === 1 ? JSON.parse(JSON.stringify(this.insertInfo_function)) : {}
      params.parentId = this.resourceId
      resourceMng_insertFun(params).then((res) => {
        if(parseInt(res.code) === 0) {
          this.$Message.success("新增成功")
          this.doSelectResourceTreeFun()
          this.doSelectChildByResourceIdFun()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 菜单---编辑回显fun
    updateShowFun_menu() {
      if(this.selectedArr_menu.length === 0) {
        this.$Message.warning("请选择需要删除的数据！")
      } else if(this.selectedArr_menu.length > 1) {
        this.$Message.warning("请选择1条数据进行编辑！")
      } else {
        let params = JSON.parse(JSON.stringify(this.selectedArr_menu[0]))
        this.updateInfo_menu = {
          resourceId: params.resourceId,
          resourceName: params.resourceName,
          resourceUrl: params.resourceUrl,
          isLeaf: params.isLeaf,
          icon: params.icon,
          priority: params.priority,
          status: params.status
        }
        this.updateModalShow_menu = true
      }
    },
    // 功能---编辑回显fun
    updateShowFun_function() {
      if(this.selectedArr_function.length === 0) {
        this.$Message.warning("请选择需要删除的数据！")
      } else if(this.selectedArr_function.length > 1) {
        this.$Message.warning("请选择1条数据进行编辑！")
      } else {
        let params = JSON.parse(JSON.stringify(this.selectedArr_function[0]))
        this.updateInfo_function = {
          resourceId: params.resourceId,
          resourceName: params.resourceName,
          resourceUrl: params.resourceUrl,
          status: params.status
        }
        this.updateModalShow_function = true
      }
    },
    // 菜单和功能---编辑fun
    updateFun() {
      let params = parseInt(this.isLeaf) === 0 ? JSON.parse(JSON.stringify(this.updateInfo_menu)) : parseInt(this.isLeaf) === 1 ? JSON.parse(JSON.stringify(this.updateInfo_function)) : {}
      resourceMng_updateFun(params).then((res) => {
        if(parseInt(res.code) === 0) {
          this.$Message.success("编辑成功")
          this.doSelectResourceTreeFun()
          this.doSelectChildByResourceIdFun()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 菜单和功能---删除fun
    deleteFun() {
      let resourceIdArr = []
      if(parseInt(this.isLeaf) === 0 && this.selectedArr_menu.length === 0) {
        this.$Message.warning("请选择需要删除的数1据！")
        return false
      }
      if(parseInt(this.isLeaf) === 1 && this.selectedArr_function.length === 0) {
        this.$Message.warning("请选择需要删除的数2据！")
        return false
      }
      if(parseInt(this.isLeaf) === 0) {
        resourceIdArr = this.selectedArr_menu.map((item) => {
          return item.resourceId
        })
      }
      if(parseInt(this.isLeaf) === 1) {
        resourceIdArr = this.selectedArr_function.map((item) => {
          return item.resourceId
        })
      }
      resourceMng_deleteFun({
        resourceIds: resourceIdArr.join(',')
      }).then((res) => {
        if(parseInt(res.code) === 0) {
          this.$Message.success("删除成功")
          this.doSelectResourceTreeFun()
          this.doSelectChildByResourceIdFun()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 菜单---全选fun
    selectAllFun_menu(res) {
      this.selectedArr_menu = res
    },
    // 菜单---选项改变
    selectionChangeFun_menu(res) {
      this.selectedArr_menu = res
    },
    // 菜单---改变页码fun
    changePageFun_menu(res) {
      this.pageTool_menu.pageNum = res
    },
    // 功能---全选fun
    selectAllFun_function(res) {
      this.selectedArr_function = res
    },
    // 功能---选项改变
    selectionChangeFun_function(res) {
      this.selectedArr_function = res
    },
    // 功能---改变页码fun
    changePageFun_function(res) {
      this.pageTool_function.pageNum = res
    }
  }
}
</script>

<style lang="less" scoped>
#SystemMng-ResourceMng-Page {
  display: flex;
  .tree-ctn {
    width: 20%;
  }
  .resourceMng-ctn {
    width: 80%;
  }
}
.modal-item {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  label {
    width: 25%;
  }
  .modal-ipt-reset {
    width: 80%;
  }
}
</style>
